@import './theme.scss';
@import './_variables.scss';
@import './btn.scss';
@import './font.scss';
@import './reset.scss';

:root {
}

#app {
  min-height: 100vh;
}

// 监听系统的主题模式
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ' ';
    clear: both;
    height: 0;
  }
}

// 一行省略号
.aline-ellipses {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.large {
  width: 420px;
  height: 54px;
}

.medium {
  width: 200px;
  height: 54px;
}

.small {
  width: 86px;
  height: 46px;
  font-size: 14px;
}

.mini {
  width: 58px;
  height: 40px;
}

.btn-primary {
  cursor: pointer;
  width: 420px;
  height: 54px;
  border: 1px solid $solar-theme-color-orange;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    270deg,
    #ff8800 0%,
    $solar-theme-color-orange 100%
  );
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  // letter-spacing: 1px;
  box-sizing: border-box;

  &.large {
    @extend .large;
  }

  &.medium {
    @extend .medium;
  }

  &.small {
    @extend .small;
  }

  &.mini {
    @extend .mini;
  }

  &:hover {
    background: linear-gradient(270deg, #ff6b00 0%, #e66000 100%);
    transition: all 200ms;
  }

  &.disabled {
    cursor: not-allowed;
    background: linear-gradient(270deg, #ffc380 0%, #ffa77f 100%);
    border: 0;
  }
}

.btn-hollow {
  cursor: pointer;
  width: 200px;
  height: 54px;
  border: 1px solid $solar-theme-color-orange;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  color: $solar-theme-color-orange;
  // letter-spacing: 1px;
  box-sizing: border-box;

  &.large {
    @extend .large;
  }

  &.medium {
    @extend .medium;
  }

  &.small {
    @extend .small;
  }

  &.mini {
    @extend .mini;
  }

  &:hover {
    color: #fff;
    background: linear-gradient(270deg, #ff8800 0%, #ff5000 100%);
    transition: all 200ms;
  }

  &.disabled {
    cursor: not-allowed;
    border: 1px solid #ffa880;
    color: #ffa880;
  }
}

.btn-plain {
  cursor: pointer;
  width: 86px;
  height: 46px;
  border: 1px solid #ebebeb;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: #253239;
  // letter-spacing: 1px;
  box-sizing: border-box;

  &.large {
    @extend .large;
  }

  &.medium {
    @extend .medium;
  }

  &.small {
    @extend .small;
  }

  &.mini {
    @extend .mini;
  }

  &.active {
    border: 1px solid $solar-theme-color-orange;
    color: $solar-theme-color-orange;
  }

  &:hover {
    border: 1px solid $solar-theme-color-orange;
    color: $solar-theme-color-orange;
    transition: all 200ms;
  }

  &.disabled {
    cursor: not-allowed;
    border: 1px solid #dcdcdc;
    color: #dcdcdc;
  }
}

// 下划线
.underline {
  &:hover::after {
    display: block;
    content: '';
    margin-top: 2px;
    border: 1px solid #ff5000;
    transition: all 200ms;
  }
}

// 链接样式
.link_a {
  cursor: pointer;
  min-height: 20px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #ff5000;
  // letter-spacing: 1px;

  &:hover {
    .text::after {
      display: block;
      content: '';
      margin-top: 2px;
      border: 1px solid #ff5000;
      transition: all 200ms;
    }
  }

  &.disabled {
    color: #ffa880;
  }
}

// 链接样式2
.link_a_2 {
  cursor: pointer;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  // // letter-spacing: 1px;

  &:hover {
    color: #ff5000;
  }

  &.disabled {
    color: #dcdcdc;
  }
}

.common-page-container {
  min-height: 100vh;
  background: var(--background-color);
  box-sizing: border-box;
}
